/* 样式部分，用于区分图片和空白框元素 */
.image-container {
    display: flex;
    justify-content: center;
}
.dropBody {
    display: flex;
    justify-content: center;
}
.image {
    width: 18vw;
    height: 1vw;
    margin: 1vw;
    cursor: pointer;
}
.ImageBackground {
    width: 20vw;
    height: 20vw;
    border: 2px dashed gray;
    margin: 2vw 2vw 2vw 2vw;
}
.blank-box {
    width: 20vw;
    height: 20vw;
    border: 2px dashed gray;
    margin: 0.5rem 1rem;
    display: flex;
    line-height: 4.5rem;
}
#blank-box1 {
    width: 20vw;
    height: 20vw;
    border: 2px dashed gray;
    margin: 2vw 2vw 2vw 2vw;
    display: inline-block;
    position: relative;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
        text-align: center; /* 确保文本在行内居中 */
}
#blank-box2 {
    width: 20vw;
    height: 20vw;
    border: 2px dashed gray;
    margin: 2vw 2vw 2vw 2vw;
    display: inline-block;
    position: relative;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    text-align: center; /* 确保文本在行内居中 */
}
.box-number {
    font-size: 6rem; /* 设置字体大小 */
    font-weight: bold; /* 设置字体为粗体 */
    color: rgb(214, 214, 214); /* 设置字体颜色 */
    z-index: -10;
    line-height: 7rem;
    display: flex; /* 使用 flexbox 布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    text-align: center; /* 确保文本在行内居中 */
}
.dropped {
    border: 4px dashed #46903d;
}

#floatingImage1 {
    position: absolute;
    top: 15%;
    left: 15%;
    z-index: 99;
    width: 5rem;
    height: 5rem;
}
#floatingImage2 {
    position: absolute;
    top: 15%;
    left: 55%;
    z-index: 99;
    width: 5rem;
    height: 5rem;
}

/* 故事的样式 */
.ImgStyleOne {
    min-width: 70%;
    max-width: 70%;
    margin: 0 auto;
    height: 45vw;
}
.downBody {
    margin-top: 1%;
}
